<!DOCTYPE html>
<html>
	<head>
		{include file="public/_header" /}
		<style type="text/css">
			.layui-upload-list{
				margin: 0!important;
				float: left;
			}
			.layui-upload-img {
				width: 45px;
				height: 38px;
				margin: 0 10px;
				border:1px solid #ddd
			}
		</style>
	</head>
	<body>

		<form class="layui-form" action="">
			<div style="background-color: #F2F2F2;">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-body">
								<div class="layui-form">

									<table class="layui-table table-form">
										<colgroup>
											<col width="150">
											<col>
										</colgroup>
										<tbody>
											<tr>
												<th style="text-align:right">所属栏目</th>
												<td>
													<select name="pid" lay-verify="required">
														<option value="0">顶级栏目</option>
														{volist name="cate" id="item"}
														<option value="{$item.id}" {if($item.id==$id) }selected{/if}>{$item._name} </option> {/volist} </select>
														 </td> </tr> <tr>
												<th style="text-align:right">内容模型</th>
												<td>
													<select name="model_id" lay-verify="required" lay-filter="model">
														{volist name="mlist" id="item"}
														<option value="{$item.id}" {if($item.id==$model_id)} selected {/if}>{$item.name} </option> {/volist} </select>
											<tr>
												<th style="text-align:right">栏目名称</th>
												<td><input type="text" name="name" placeholder="" lay-verify="required" autocomplete="off" class="layui-input"></td>
											</tr>			 </td> </tr> 
											<tr>
												<th style="text-align:right">别名(拼音)</th>
												<td><input type="text" name="ename" placeholder="" autocomplete="off" class="layui-input"></td>
											</tr>


											<tr>
												<th style="text-align:right">栏目类型</th>
												<td>
													<input type="radio" lay-filter="type" name="type" value="1" title="普通栏目" checked>
													<input type="radio" lay-filter="type" name="type" value="2" title="频道封面">
													<input type="radio" lay-filter="type" name="type" value="3" title="单页(直接发布文章，如:公司简介)">
												</td>
											</tr>
											<tr>
												<th style="text-align:right">频道模板</th>
												<td>
													<select name="template_category" lay-verify="required">
														{volist name="temp_category" id="item"}
														<option value="{$item}">{$item} </option>
														{/volist}
													</select>
												</td>
											</tr>
											<tr>
												<th style="text-align:right">列表模板</th>
												<td>
													<select name="template_list" lay-verify="required">
														{volist name="temp_list" id="item"}
														<option value="{$item}">{$item} </option>
														{/volist}
													</select>
												</td>
											</tr>
											<tr>
												<th style="text-align:right">内容页模板</th>
												<td>
													<select name="template_show" lay-verify="required">
														{volist name="temp_show" id="item"}
														<option value="{$item}">{$item} </option>
														{/volist}
													</select>
												</td>
											</tr>
											<tr>
												<th style="text-align:right">栏目描述</th>
												<td><textarea name="description" placeholder="请输入内容" class="layui-textarea"></textarea></td>
											</tr>
											<tr>
												<th style="text-align:right">栏目组图</th>
												<td>
													<div class="layui-upload">
														<button type="button" style="float: left;" class="layui-btn layui-btn-primary" id="test1">上传图片</button>
														<div class="layui-upload-list">
															<img class="layui-upload-img" src="__STATIC__/admin/images/image.png" id="demo1">
															<p id="demoText"></p>
															<input type="hidden" name="cat_pic" id="logo" value="" />
														</div>
													</div>
												</td>
											</tr>
											<tr>
												<th style="text-align:right">排序</th>
												<td><input type="number" name="sort" value="100" required lay-verify="required" placeholder="排序"
													 autocomplete="off" class="layui-input"></td>
											</tr>
											<tr>
												<th style="text-align:right">显示</th>
												<td><input type="checkbox" name="status" value="1" lay-skin="switch" lay-text="ON|OFF" checked></td>
											</tr>
											<tr>
												<th style="text-align:right"></th>
												<td>
													<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
													<button type="reset" class="layui-btn layui-btn-primary">重置</button>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</body>
</html>
<script>
	//Demo
	layui.use(['form', 'upload'], function() {
		var form = layui.form;
		var $ = layui.jquery,
			upload = layui.upload;
		//普通图片上传
		var uploadInst = upload.render({
			elem: '#test1',
			url: "{:url('admin/Upload/addImages')}",
			before: function(obj) {
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result) {
					$('#demo1').attr('src', result); //图片链接（base64）
				});
			},
			done: function(res) {
				if (res.status  == 1) {
					$('#demo1').attr('src', "__STATIC__/admin/images/image.png");
					return layer.msg(res.message);
				}else{
					$("#logo").val(res.data);
				}
			},
			error: function() {
				//演示失败状态，并实现重传
				var demoText = $('#demoText');
				demoText.html(
					'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function() {
					uploadInst.upload();
				});
			}
		});
		//监听提交
		form.on('submit(formDemo)', function(data) {
			delete data.field.file;
			if(data.field.status){
				data.field.status = 1
			}else{
				data.field.status = 0
			}
			var index = parent.layer.getFrameIndex(window.name);
			var lfc = top.layerFrameConfig;
			var info = lfc.iframeB.info;
			$.ajax({
				type: "post",
				url: "{:url('admin/category/add_form')}",
				data: data.field,
				dataType: "json",
				success: function(res) {
					if (res.data) {
						layer.msg('添加成功', {
							icon: 1,
							time: 500 //2秒关闭（如果不配置，默认是3秒）
						}, function() {
							parent.layer.close(index);
							info.reload()
						});

					}
				},
			});
			return false;
		});
		form.on('select(model)', function(data) {
			add(data.value)
		})

		function add(value) {

			$.ajax({
				type: "post",
				url: "{:url('admin/category/get_temp')}",
				data: {
					model_id: value
				},
				dataType: "json",
				success: function(res) {
					$("select[name='template_category']").val(res.data.template_category);
					$("select[name='template_list']").val(res.data.template_list);
					$("select[name='template_show']").val(res.data.template_show);
					layui.form.render("select");
				},
			});
		}
		var value = $("select[name='model_id']").val();
		add(value)
	});
</script>
